body {
    background-color: white;
    font-family: roboto, light, sans-serif;
}

#top-panel{
    display: table;
    width: 100%;
    height: 75px;
}

.header-div{
	display: table-cell;
	overflow: hidden;

	background-repeat: no-repeat;
	background-size: contain;
}
	
#header-mail{
	background-image: url(../img/header/mail.jpg);
}

#header-title{
	background-image: url(../img/header/title.jpg);
}

#header-blog{
	background-image: url(../img/header/blog.jpg);
}

.header-div-img{

}

#title{
    display: table-cell;

    text-align: center;
    vertical-align: middle;
}

#content{
    padding: 0 10%;
}

#gallery{
    padding-top: 10px;
}

.item{
    margin: 7px 8px;
    position: relative;
    width: calc(100% / 3 - 21px);
}

.photo{
    max-height: 100%;
    max-width: 100%;
    
    box-shadow: 5px 5px 5px #7C7C7C;
    -o-box-shadow: 5px 5px 5px #7C7C7C;
    -moz-box-shadow: 5px 5px 5px #7C7C7C;
    -webkit-box-shadow: 5px 5px 5px #7C7C7C;
}

.overflow{
	position: absolute;
	top: 0;
	left: 0;
	bottom: -7px;
	right: -7px;
	
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;

    transition: visibility 0.2s linear, opacity 0.2s linear;
    -o-transition: visibility 0.2s linear, opacity 0.2s linear;
    -ms-transition: visibility 0.2s linear, opacity 0.2s linear;
    -moz-transition: visibility 0.2s linear, opacity 0.2s linear;
    -webkit-transition: visibility 0.2s linear, opacity 0.2s linear;
}

.caption-wrapper{
	display:table;
	width: 100%;
	height: 100%;
}

.caption{
	width: 100%;
	max-width: 1px; /*have no idea why it works*/
	height: 100%;
	padding: 20px;
	
	display:table-cell;
	vertical-align: middle;
	text-align: center;	

	word-wrap:break-word;
    font-size: 8pt;
    
    color: #999999;
    
    user-select:none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none;
}

.hidden{
    opacity: 0;
    visibility: hidden;
}

#footer{
	position: fixed;
	bottom: 0;
	right: 0;
	
	width: auto;
}

#author {
	text-decoration: none;
}

#author-text {	
	font-size: 8pt;
	color: #999999;
	text-align: right;
	line-height: 1;
	margin: 5px 8px;
}

@media all and (max-width: 900px){

	.item{
	    width: calc(100% / 2 - 21px);
	}	
	
	#top-panel{
    	height: 50px;
	}
}

@media all and (max-width: 650px){

	.item{
	    width: calc(100% / 1 - 21px);
	}	
	
	#top-panel{
    	height: 30px;
	}
}

@media only screen and (orientation : portrait){
    .item{
        width: calc(100% / 1 - 21px);
    }

    #top-panel{
        height: 30px;
    }
}

@media all and (max-width: 400px){

	#top-panel{
    	height: 20px;
	}
}
